<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import { useNewActivity } from "./hooks/NewActivity";
const {
  form,
  rules,
  RefFom,
  loading,
  columns,
  dataList,
  btnloading,
  pagination,
  MovementList,
  CustomerList,
  DialogVisible,
  ViewOpenOrStop,
  close_from,
  sbutim_from,
  handleSizeChange,
  handleCurrentChange
} = useNewActivity()
</script>

<template>
  <div class="main">
    <PureTableBar title="活动列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="DialogVisible = true"> 新建 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="650"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <!-- <el-button type='success' v-if="row.state === null || row.state === '已暂停'" size="small" text
              @click="ViewOpenOrStop(row)"> 启动
            </el-button> -->
            <el-button size="small" text :type="row.status == 0 ? 'success' : 'primary'" @click="ViewOpenOrStop(row)">
              {{ row.status == '0' ? "启动" :
                row.status == '1' ? "暂停" : '启动' }}
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <ReDialog :width="450" :height="380" :models="DialogVisible" @Closes="close_from(RefFom)">
      <template #header>
        <h2 style="text-align: center;">新建活动</h2>
      </template>
      <template #main>
        <el-form label-width="130px" label-position="right" :model="form" ref="RefFom" :rules="rules" class="RefFom">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入活动名称" class="!w-[220px]" />
          </el-form-item>
          <el-form-item label="客户群体" prop="customer">
            <el-select v-model="form.customer" placeholder="请选择" value-key="id" class="!w-[220px]">
              <el-option v-for="(item, l) in CustomerList" :key="l" :label="item.name" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="触发动作" prop="movement">
            <el-select v-model="form.movement" placeholder="请选择" class="!w-[220px]">
              <el-option v-for="(item, l) in MovementList" :key="l" :label="item.dictName" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="发送内容" prop="sendcontent">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model.trim="form.sendcontent"
              placeholder="发送内容" class="!w-[220px]" />
          </el-form-item>
          <el-form-item label="发送时间" prop="date">
            <el-date-picker v-model="form.date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              placeholder="选择日期时间" class="!w-[220px]">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button type="primary" @click="sbutim_from(RefFom)" :loading="btnloading"> 确定 </el-button>
        <el-button @click="close_from(RefFom)"> 取消 </el-button>
      </template>
    </ReDialog>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

:deep(.RefFom) {
  .el-select {
    width: 100%;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}
</style>
